<template>
	<view class="cart_warp">
		<u-navbar class="navbar" title-color="#fff" back-icon-color="#ffffff"
			:background="background" :back-text-style="{color: '#fff'}">
			<!-- #ifdef MP-WEIXIN -->
				<search @select-goods="searchTitle" @select-clear="clear" bgColor="rgba(0,0,0,0)" :disabled="false" :showAction="false"></search>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
				<search style="width: 650rpx;" @select-clear="clear" @select-goods="searchTitle" bgColor="rgba(0,0,0,0)" :disabled="false" :showAction="true"></search>
			<!-- #endif -->
		</u-navbar>
		<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		<view class="info_bar" v-if="!isEmpty">
			<view class="number_txt">
				<view class="info_txt">共</view>
				<view class="main_txt">{{goodsList.length}}</view>
				<view class="info_txt">件商品</view>
			</view>
			<view class="main_txt" @click="editClick">{{editText}}</view>
		</view>
		<view class="goodsList" v-if="!isEmpty">
			<view class="goodsItem" v-for="(item , index) in goodsList" :key="index">
				<view v-if="isShowRemove">
					<u-checkbox v-model="item.checked" @change="checkedItem" 
					:name="index" shape="circle" active-color="#20cbd4"></u-checkbox>
				</view>
				<view @click="jumpPage(item.goods_id)">
					<u-tag v-if="item.q_id == 1" text="主推区"  class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
						mode="dark" size="mini"/>
					<u-tag v-else-if="item.q_id == 2" text="优选区"  class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
						mode="dark" size="mini"/>
					<u-tag v-else="item.q_id == 3" text="福利区"  class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
						mode="dark" size="mini"/>
					<image :src="item.goods_image" style="width: 150rpx;height: auto;" mode="widthFix"></image>
				</view>
				<view class="goodsInfo" @click="jumpPage(item.goods_id)">
					<view class="goodsTitle u-line-2">{{item.goods_name}}</view>
					<view class="goodsFooter">
						<view class="itemPrice u-line-2">{{item.selling_point}}</view>
						<!-- <view class="time">
							{{item.create_time}}
						</view> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="!isEmpty" color="#909399" :margin-top="25"/>
		</view>
		<view class="footer" v-if="isShowRemove && !isEmpty">
			<view>
				<u-checkbox @change="checkedAll" v-model="clickAll"
				name="all" shape="circle" active-color="#20cbd4">全选</u-checkbox>
			</view>
			<view class="rightPart">
				<view class="checkNum">已选数量：{{checkNum}}件</view>
				<u-button shape="circle" size="medium"
				:custom-style="removeStyle" hover-class="none" @click="removeClick">删除</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import search from "@/components/public/search.vue";
	import empty from "@/components/public/empty.vue";
	import {collectList,cancelCollect} from "@/common/api.js";
	export default {
		components: {
			loginModel,
			search,
			empty,
			hoverMenu
		},
		data() {
			return {
				background: {
					'background-color': '#20cbd4'
				},
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无收藏信息",
				goodsList:[],
				editText:"删除",
				clickAll:false,
				isShowRemove:false,
				removeStyle:{
					background:"linear-gradient(90deg,#f44739,#f60)",
					color:"#fff"
				},
				removeArr:"",
				checkNum:0,
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				name:""
			}
		},
		onLoad() {
		},
		onReady() {
		},
		onShow() {
			this.goodsList=[];
			this.pageStart = 1;
			this.selectcollectList();
		},
		onReachBottom() {
			if(this.total/(this.pageStart*this.pageSize)>1){
				this.pageStart++;
				this.selectcollectList();
			}else{
				this.status = 'nomore';
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectcollectList(){
				collectList(this,{page:this.pageStart,limit:this.pageSize,name:this.name});
			},
			editClick(){
				var temp=this.isShowRemove;
				this.isShowRemove=!temp;
				if(this.isShowRemove){
					this.editText="完成";
				}else{
					this.editText="删除";
				}
				
			},
			checkedItem(e){
				if(e.value){
					this.removeArr+=this.goodsList[e.name].id+",";
				}else{
					var removeArr=this.removeArr.split(",");
					for(var i=0;i<removeArr.length;i++){
						if(removeArr[i]==this.goodsList[e.name].id){
							removeArr.splice(i,1);
						}
					}
					this.removeArr=removeArr.toString();
				}
				var falseNum=0;
				this.goodsList.map(val => {
					if(!val.checked){
						falseNum++;
					}
				})
				if(falseNum==1){
					this.clickAll=true;
				}else{
					this.clickAll=false;
				}
				if(this.removeArr.substring(0,this.removeArr.length-1).split(",").toString()==""){
					this.checkNum=0; 
				}else{
					this.checkNum=this.removeArr.substring(0,this.removeArr.length-1).split(",").length; 
				}
				
			},
			// 全选
			checkedAll(e) {
				this.removeArr="";
				this.clickAll=e.value;
				this.goodsList.map(val => {
					val.checked = e.value;
					if(e.value){
						this.removeArr+=val.id+",";
					}
				})
				if(!e.value){
					this.removeArr="";
				}
				if(this.removeArr.substring(0,this.removeArr.length-1).split(",").toString()==""){
					this.checkNum=0; 
				}else{
					this.checkNum=this.removeArr.substring(0,this.removeArr.length-1).split(",").length; 
				}
			},
			removeClick(){
				if(this.removeArr==""){
					this.$refs.uToast.show({title: '请选择要删除的商品'});
					return;
				}
				cancelCollect(this,{ids:this.removeArr});
			},
			//检索查询
			searchTitle(val){
				this.name = val;
				this.goodsList=[];
				this.pageStart = 1;
				this.selectcollectList();
			},
			clear(){
				this.name = "";
				this.goodsList=[];
				this.pageStart = 1;
				this.selectcollectList();
			},
			jumpPage(id){
				this.removeArr = "";
				this.clickAll = false;
				this.checkNum=0;
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			}
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
	.cart_warp{
		font-family: PingFang SC;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
	}
	.navbar{
		width: 100%;
	}
	.info_bar{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx;
		margin: 20rpx 10rpx;
	}
	.number_txt{
		display: flex;
	}
	.info_txt{
		color: #909399;
	}
	.main_txt{
		color: #0e595d;
	}
	.goodsList{
		margin: 0 0 150rpx 0;
	}
	.goodsItem{
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.goodsInfo{
		margin-left: 20rpx;
	}
	.goodsTitle{
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.goodsNorm{
		font-size: 25rpx;
		margin-bottom: 20rpx;
	}
	.goodsFooter{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.itemPrice{
		color: #0e595d;
		font-weight: 500;
	}
	/*  #ifdef  H5  */
	.footer{
		width: 100%;
		position: fixed;
		bottom: 85rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		align-items: center;
	}
	/*  #endif  */
	/*  #ifndef  H5  */
	.footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		align-items: center;
	}
	/*  #endif  */
	.rightPart{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.checkNum{
		font-size: 25rpx;
		color: #909399;
		margin-right: 15rpx;
	}
	.time{
		font-size: 25rpx;
		color: #909399;
	}
	.typeTag{
		position: absolute;
		z-index: 1;
	}
</style>
